<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { $LoginId, $Cancel } from '@/api/user'
import { $DoctorDetail } from '@/api/doctor'

//判断是否有预约
const isShow = ref(false)
//获取预约时间
const time = ref("")
//获取医生类型
const type = (["内科", "外科", "儿科"])
//获取用户的预约状态
const appointmentStatus = ref({
    name: "",
    position: "",
    department: 0,
    good: "",
    url: ""
})
onMounted(() => {
    $LoginId({ id: sessionStorage.getItem('id') }).then((res) => {
        console.log(isShow.value);
        if (res.data.doctorID == null) {
            isShow.value = false
        } else {
            isShow.value = true
            time.value = res.data.time
            $DoctorDetail({
                id: res.data.doctorID
            }).then((res) => {
                console.log(res.data);

                appointmentStatus.value = res.data
            })
        }
    })
})

//取消预约
const cancelAppointment = () => {
    $Cancel({ id: sessionStorage.getItem('id') }).then((res) => {
        isShow.value = false
        alert('取消成功')
    })
}
</script>

<template>
    <div class="appointment-status">
        <div class="status-top">
            <span>预约状态</span>
        </div>
        <div class="status-bottom" v-show="isShow">
            <div class="status-body">
                <div class="status-body-top">
                    <div class="status-body-top-text1">待就诊</div>
                    <div class="status-body-top-text2">挂号成功，请耐心等待医生接诊。</div>
                </div>
                <div class="status-body-doctor">
                    <div class="status-body-doctor-left">
                        <img :src="appointmentStatus.url" alt="">
                    </div>
                    <div class="status-body-doctor-right">
                        <div class="status-body-doctor-right-name">{{ appointmentStatus.name }} <span>{{
                            appointmentStatus.position }}</span></div>
                        <div class="status-body-doctor-right-department">{{ type[appointmentStatus.department] }}</div>
                        <div class="status-body-doctor-right-good">{{ appointmentStatus.good }}</div>
                    </div>

                </div>
                <div class="status-body-time">
                    <div class="status-body-time-item">
                        <div class="status-body-time-text1">就诊时间</div>
                        <div class="status-body-time-text2">{{ time }}</div>
                    </div>
                    <div class="status-body-time-item">
                        <div class="status-body-time-text1">订单类型</div>
                        <div class="status-body-time-text2">线下复诊</div>
                    </div>
                </div>
                <div class="status-body-number">
                    <div class="status-body-number-text1">就诊序号</div>
                    <div class="status-body-number-text2">1</div>
                    <div class="status-body-number-button">
                        <button @click="cancelAppointment">取消预约</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="status-bottom" v-show="!isShow">
            <div class="status-no">暂无预约</div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.appointment-status {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 110vh;
    color: #333;

    .status-top {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 0.5vw;
        padding-left: 3vw;
        margin-bottom: 2vh;
        border: 0.1vw solid #ccccccba;

        span {
            font-size: 1.2vw;
            font-weight: 800;
            line-height: 3vh;
            padding-left: 2vw;
            border-left: 0.5vw solid #45c998;
        }
    }

    .status-bottom {
        flex: 12;
        display: flex;
        justify-content: center;
        border-radius: 0.5vw;
        background-color: #f5f5f5;
        border: 0.1vw solid #ccccccba;
        padding-top: 8vh;

        .status-no {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 2vw;
        }

        .status-body {
            display: flex;
            flex-direction: column;
            width: 50vw;

            .status-body-top {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                font-size: 1.2vw;
                height: 13vh;
                color: #497aac;
                background-color: #eaf0ff;
                padding: 1vw;
            }

            .status-body-doctor {
                display: flex;
                padding: 2vw;
                border-bottom: 0.1vw solid #999;
                background-color: #fff;

                .status-body-doctor-left {
                    flex: 1;

                    img {
                        width: 9vw;
                        height: 23vh;
                    }
                }

                .status-body-doctor-right {
                    flex: 3;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin: 1.5vw 0;
                    font-size: 1vw;

                    .status-body-doctor-right-name {
                        font-size: 1.5vw;

                        span {
                            font-size: 0.8vw;
                            margin-left: 1vw;
                        }
                    }
                }
            }

            .status-body-time {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 15vh;
                padding: 1.5vw;
                margin-bottom: 3vh;
                background-color: #fff;

                .status-body-time-item {
                    display: flex;
                    justify-content: space-between;
                    font-size: 1.3vw;

                    .status-body-time-text1 {
                        color: #666;
                    }
                }

            }

            .status-body-number {
                display: flex;
                align-items: center;
                height: 10vh;
                padding: 1vw 1.5vw;
                font-size: 1.3vw;
                background-color: #fff;

                .status-body-number-text1 {
                    flex: 1;
                    color: #666;
                }

                .status-body-number-text2 {
                    flex: 1;
                    color: #d7b053;
                }

                .status-body-number-button {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: end;

                    button {
                        font-size: 1.1vw;
                        color: #666;
                        width: 8vw;
                        height: 6vh;
                        border-radius: 3vh;
                        border: 0.1vw solid #666;
                        background-color: transparent;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>